<template>
    <el-dialog id="edit-introduction"
               append-to-body
               top="10vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="edit"></icon>
                编辑简历 {{ resume.id }} 自我介绍
            </span>
        </div>
        <div>
            <el-input v-model="model.introduction" type="textarea" :rows="10" placeholder="自我介绍"></el-input>
        </div>
        <div class="mt-20 text-right">
            <el-button type="text"
                       size="medium"
                       @click="close">取消</el-button>
            <el-button type="primary"
                       size="medium"
                       :loading="saveLoading"
                       @click="save">
                <icon name="save"></icon>
                保存
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import { Prop, Emit } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

import { toJson, errorMessage, successMessage } from '@/utils'

const module = namespace('cms/resume')

@Component
export default class EditIntroduction extends Vue {
  @Prop({ type: Object, default: { width: '1000px', visible: false } }) dialog!: any

  // Vuex
  @module.State resume!: any
  @module.Action updateIntroduction!: (payLoad: any) => Promise<any>

  // form 模型
  public model: any = {}

  private saveLoading: boolean = false

  /*----- 钩子 -----*/
  created() {
    this.model = toJson(this.resume.basic)
  }

  private save(): void {
    this.saveLoading = true
    this.updateIntroduction({ id: this.resume.id, index: this.dialog.index, params: this.model }).then((res: any) => {
      this.saveLoading = false
      if (res.status !== 200) {
        errorMessage(res.message)
        return false
      }

      successMessage(res.message)
      this.close()
    }).catch((err: any) => {
      this.saveLoading = false
    })
  }

  @Emit()
  close(): void {}
}
</script>

<!--<style lang="common" scoped>-->
<!--@import '~@/styles/element/element-variables';-->
<!--</style>-->
